<template>
  <div v-if="isAuth(['ROOT', 'DRIVER:SELECT'])">
    <el-form :inline="true" :model="searchForm" :rules="dataRule" ref="searchForm">
      <el-form-item prop="name">
        <el-input v-model="searchForm.query.orderNo" placeholder="订单编号" size="medium" class="input"
                  clearable="clearable"/>
      </el-form-item>
      <el-form-item prop="name">
        <el-input v-model="searchForm.query.driverId" placeholder="司机编号" size="medium" class="input"
                  clearable="clearable"/>
      </el-form-item>
      <el-form-item prop="name">
        <el-input v-model="searchForm.query.customerId" placeholder="乘客编号" size="medium" class="input"
                  clearable="clearable"/>
      </el-form-item>
      <el-form-item prop="name">
        <el-input v-model="searchForm.query.orderCommontId" placeholder="评论编号" size="medium" class="input"
                  clearable="clearable"/>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchForm.query.status" class="input" placeholder="状态" size="medium"
                   clearable="clearable">
          <el-option label="默认" value="0"/>
          <el-option label="申诉中" value="1"/>
          <el-option label="通过" value="2"/>
          <el-option label="驳回" value="3"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="loadDataList()" icon="el-icon-search">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        cell-style="padding: 2px 0"
        style="width: 100%;"
        size="medium"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
    >
      <el-table-column prop="orderNo" header-align="center" align="center" min-width="200" label="订单编号"/>
      <el-table-column prop="driverName" header-align="center" align="center" min-width="110" label="司机"/>
      <el-table-column prop="customerName" header-align="center" align="center" min-width="110" label="乘客"/>
      <el-table-column prop="rate" header-align="center" align="center" min-width="80" label="评分">
        <template #default="scope">
          <el-tag v-if="scope.row.rate <= 2" type="danger">差评</el-tag>
          <el-tag v-else-if="3 <= scope.row.rate < 5" type="success">比较满意</el-tag>
          <el-tag v-else="scope.row.rate === 5" type="success">五星好评</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" header-align="center" align="center" min-width="100" label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="primary">默认</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="primary">申诉中</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="success">通过</el-tag>
          <el-tag v-else="scope.row.status === 3" type="danger">驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" header-align="center" align="center" min-width="150" label="日期"/>
      <el-table-column prop="commentContent" header-align="center" align="center" min-width="180" label="评论内容"/>
      <el-table-column prop="driverReason" header-align="center" align="center" min-width="180" label="申诉理由"/>
      <el-table-column prop="auditLoginUsername" header-align="center" align="center" min-width="110" label="申诉受理人"/>
      <el-table-column header-align="center" align="center" width="80" label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" v-if="isAuth(['ROOT', 'USER:UPDATE'])"
                     @click="acceptance(scope.row.orderCommontId)">
            受理
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--合同上传弹出框-->
    <el-dialog
        v-model="showAcceptance"
        title="对司机的申诉进行审核"
        width="30%"
    >
      <el-form :model="form">
        <el-form-item label="审核备注">
          <el-input v-model="form.auditDesc"/>
        </el-form-item>
      </el-form>

      <template #footer>
      <span class="dialog-footer">
        <el-button type="success" @click="agree">申诉通过</el-button>
        <el-button type="danger" @click="refuse">申诉驳回</el-button>
        <el-button @click="cancel">取消</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import $ from 'jquery';
import request from '../utils/request'
import Update from './driver-update.vue';
import {ElMessage, ElMessageBox} from "element-plus";
import {ref} from 'vue'

export default {
  components: {
    Update
  },
  data() {
    return {
      // 高级查询参数
      searchForm: {
        query: {
          orderNo: null,
          driverId: null,
          customerId: null,
          orderCommontId: null,
          status: null,
        },
        page: 1,
        rows: 10
      },
      expands: [],
      dataList: [], // 列表数据
      totalCount: 0, // 总条数
      dataListLoading: false, // 盲等框
      // 表单数据
      form: {
        auditDesc: "",
      },
      showAcceptance: false,
      orderCommontId: null,
      getRowKeys(row) {
        return row.id;
      },
    };
  },
  methods: {

    // 加载列表数据
    loadDataList() {
      // _this保存当前Vue实例
      let _this = this;
      // 遍历查询条件
      for (var prop in _this.searchForm.query) {
        if (_this.searchForm.query[prop] == "") { // 为空字符串就赋值为null, 防止sql查询按空字符去查
          _this.searchForm.query[prop] = null;
        }
      }
      // 分页查询+高级查询合同数据
      _this.post("/order/manager/orderCommentRepresentations/pagelist", _this.searchForm, (res) => {
        let {success, data} = res;
        if (success) { // 请求成功
          _this.totalCount = data.total; // 总条数
          _this.dataList = data.rows; // 列表
        }
      });
    },
    // 受理司机申诉
    acceptance(orderCommontId) {
      // _this保存当前Vue实例
      let _this = this;
      // 开启受理弹框
      _this.showAcceptance = true;
      _this.orderCommontId = orderCommontId;
    },

    // 取消审核
    cancel() {
      let _this = this;
      // 关闭弹框
      _this.showAcceptance = false;
    },

    agree() {
      let _this = this;
      console.log(_this.orderCommontId);
      let param = {
        auditDesc: _this.form.auditDesc,
        orderCommontId: _this.orderCommontId,
      }
      _this.post("/order/manager/orderCommentRepresentations/agree", param, (res) => {
        if (res.success) {
          ElMessage({
            type: 'success',
            message: '受理成功',
          })
          // 关闭弹框
          _this.showAcceptance = false;
          // 获取数据列表
          this.loadDataList();
        }
      })
    },
    refuse() {
      let _this = this;
      console.log(_this.orderCommontId);
      let param = {
        auditDesc: _this.form.auditDesc,
        orderCommontId: _this.orderCommontId,
      }
      _this.post("/order/manager/orderCommentRepresentations/refuse", param, (res) => {
        if (res.success) {
          ElMessage({
            type: 'success',
            message: '受理成功',
          })
          // 关闭弹框
          _this.showAcceptance = false;
          // 获取数据列表
          this.loadDataList();
        }
      })
    }
  },
  created: function () {
    // 获取数据列表
    this.loadDataList();
  }
};
</script>
<style lang="less" scoped="scoped">
@import url('driver.less');
</style>
